<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #loginForm {
            background-color: #fff;
            width: 300px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        div {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="loginForm" v-if="!isLogin">
            <h1>用户登录</h1>
            <div>
                <label for="username">用户名:</label>
                <input type="text" id="username" v-model="username" />
            </div>
            <div>
                <label for="password">密码:</label>
                <input type="password" id="password" v-model="password" />
            </div>
            <div>
                <button @click="login">登录</button>
            </div>
        </div>
        <div v-else>
            <p>{{ username }} 已登录</p>
            <div>
                <button @click="loginOut">登出</button>
            </div>
        </div>
    </div>

    <script>
        var app = Vue.createApp({
            data() {
                return {
                    username: '',
                    password: '',
                    isLogin: false
                }
            },
            methods: {
                login: function () {
                    if (this.username === "admin" && this.password === "123") {
                        alert("登录成功");
                        this.isLogin = true;
                    } else {
                        alert("登录失败");
                    }
                },
                loginOut: function () {
                    this.isLogin = false;
                }
            }
        });
        var vm = app.mount("#app");
    </script>
</body>
</html>